<template>
  <el-card class="box-card el-card-flex">
    <div slot="header" class="clearfix">
      <span>
        <i class="el-icon-setting"></i>
        应用中心
      </span>
    </div>
    <div class="text item">
      <el-form :inline="true" @submit.native.prevent>
        <el-form-item>
          <el-input clearable v-model="searchContent" placeholder="请输入应用名称" style="width:240px;" @keyup.enter.native="searchApplication"
            @clear="searchApplication">
            <el-button slot="append" icon="el-icon-search" @click="searchApplication"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item style="float:right">
          <el-button type="primary" plain @click='handleAdd'>
            新增
            <i class="el-icon-plus"></i>
          </el-button>
        </el-form-item>
      </el-form>
      <div class="el-flex el-box-column">
        <el-table :data="tableData" border stripe style="width: 100%" height="100%">
          <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="appId" label="ID"></el-table-column>
          <el-table-column min-width="100px" sortable :show-overflow-tooltip="true" prop="appName" label="应用名称"></el-table-column>
          <el-table-column min-width="120px" sortable :show-overflow-tooltip="true" prop="ipAddr" label="链接地址"></el-table-column>
          <el-table-column min-width="142px" sortable :show-overflow-tooltip="true" prop="realAddr" label="用户信息接口地址"></el-table-column>
          <el-table-column min-width="120px" sortable :show-overflow-tooltip="true" prop="appDesc" label="描述"></el-table-column>
          <el-table-column min-width="100px" sortable prop="appStatus" label="启用状态" align="center">
            <template slot-scope="scope">
              <el-switch v-model="scope.row.appStatus" active-value="Y" inactive-value="N" @change="statusClick(scope.$index, scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column min-width="143px" sortable prop="control" label="操作" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button class="td-btn-icon" type="text" title="编辑" @click="handleEdit(scope.$index, scope.row)"><i
                  class="el-icon-edit"></i></el-button>
              <el-button class="td-btn-icon" type="text" title="删除" @click="handleDelete(scope.$index, scope.row)"><i
                  class="el-icon-delete"></i></el-button>
              <el-button class="td-btn-icon" type="text" title="订阅管理" @click="handleSubscription(scope.$index, scope.row)"><i
                  class="el-icon-link"></i></el-button>
              <el-button class="td-btn-icon" type="text" title="用户映射" @click="handleUser(scope.$index, scope.row)"><i
                  class="el-icon-user"></i></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!-- 分页 -->
      <el-pagination background @size-change="handleSizeChange" :current-page="currentPage" @current-change="handleCurrentChange"
        :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length"></el-pagination>
    </div>
    <!-- 新增编辑弹框 -->
    <el-dialog :title="changeTitle" :visible.sync="dialogFormVisible" width='40%' :close-on-click-modal='false'
      :close-on-press-escape='false' @close='closeDialog'>
      <el-form ref='formData' label-width="107px" :rules="rules" :model="formData">
        <el-form-item label="应用名称" prop="appName">
          <el-col :span='8'>
            <el-input autocomplete="off" v-model="formData.appName"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="链接地址" prop="ipAddr">
          <el-col :span='12'>
            <el-input autocomplete="off" v-model='formData.ipAddr'></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="用户信息接口" prop="realAddr">
          <el-col :span='12'>
            <el-input autocomplete="off" v-model="formData.realAddr"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="描述" prop="appDesc">
          <el-col :span='8'>
            <el-input type="textarea" autocomplete="off" v-model="formData.appDesc"></el-input>
          </el-col>
        </el-form-item>
        <el-form-item label="是否启用" prop="appStatus">
          <el-col :span='8'>
            <el-switch v-model='formData.appStatus' active-value="Y" inactive-value="N">
            </el-switch>
          </el-col>
        </el-form-item>
        <el-form-item label="图标">
          <el-col :span='8'>
            <el-upload class="upload-demo" action="/api/aggregation/attachManage/upload" :on-preview="handlePreview"
              :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3" :on-exceed="handleExceed"
              accept="image/jpeg,image/gif,image/png,image/jpg" :file-list="fileList">
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogEdit('formData')">确 定 <i class="el-icon-document-checked"></i></el-button>
        <el-button @click="dialogClose">取 消 <i class="el-icon-refresh-left"></i></el-button>
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
  import {
    Tree,
    Dialog,
    Table,
    TableColumn,
    Pagination,
    MessageBox,
    Message,
    Upload
  } from 'element-ui'
  import {
    applicationTable,
    applicationgTableRow,
    applicationEdit

  } from '@/api/applictionCenter/applicationCenter.js'
  export default {
    components: {
      'el-tree': Tree, // 树形菜单
      'el-dialog': Dialog, // 对话框
      'el-table': Table, // 表格
      'el-table-column': TableColumn, // 表格列
      'el-pagination': Pagination, // 分页
      "el-upload": Upload, //上传
    },
    created() {
      this.applicationTable(this.currentPage, this.pageSize, this.searchContent)
    },
    data() {
      return {
        searchContent: '', //搜索内容
        currentPage: 1,
        pageSize: 20,
        tableData: [], //应用中心表格数据
        formData: {}, //编辑弹框数据源
        changeTitle: '', //编辑/新增变标题
        dialogFormVisible: false, //弹框默认关闭
        fileList: [], //上传图片的文件列表
        rules: { //弹框校验
          appName: [{
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }],
          ipAddr: [{
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }],
          realAddr: [{
            required: true,
            message: '请输入活动名称',
            trigger: 'blur'
          }]
        }
      }
    },
    methods: {
      applicationTable(page, size, data) { //应用中心表格数据源
        applicationTable(page, size, data).then(res => {
          if (res.data.code == 10000) {
            this.tableData = res.data.data.records
          }
        })
      },
      searchApplication() { //查询
        this.applicationTable(this.currentPage, this.pageSize, this.searchContent)
      },
      handleAdd() { //表格新增
        this.changeTitle = '新增应用信息'
        this.dialogFormVisible = true
      },
      handleEdit(index, row) { //表格编辑
        this.changeTitle = '编辑应用信息'
        this.dialogFormVisible = true
        applicationgTableRow(row.appId).then(res => {
          if (res.data.code == 10000) {
            this.formData = res.data.data
          }
        })
      },
      handleDelete() { //表格删除

      },
      dialogEdit(formName) { //编辑弹框确认
        this.$refs[formName].validate((valid) => {
          if (valid) {
            applicationEdit(this.formData).then(res => {
              if (res.data.code == 10000) {
                this.dialogFormVisible = false
                this.$refs.formData.resetFields()
                this.applicationTable(this.currentPage, this.pageSize)
              }
            })
          } else {
            Message({
              message: '请完成必填项',
              type: 'warning'
            })
          }
        });
      },
      dialogClose() { //弹框关闭按钮关闭
        this.closeDialog()
      },
      closeDialog() { //弹窗X号关闭
        this.$refs.formData.resetFields()
        this.dialogFormVisible = false
      },
      handleSubscription(index, row) { //订阅管理
        this.$router.addRoutes(this.multiRouters([{
          path: 'subscriptionManage',
          name: 'subscriptionManage', //自定义name名称
          component: () => import('@/views/thematicPortal/applicationCenter/subscriptionManage'),
          meta: {
            title: row
          }
        }]));
        this.$router.push({
          name: "layout_frame_subscriptionManage", //顶部导航+侧边导航
          params: {
            row: row
          }
        })
      },
      handleUser(index, row) { //人员映射
        this.$router.addRoutes(this.multiRouters([{
          path: 'userMapping',
          name: 'userMapping', //自定义name名称
          component: () => import('@/views/thematicPortal/applicationCenter/userMapping'),
          meta: {
            title: row
          }
        }]));
        this.$router.push({
          name: "layout_frame_userMapping", //顶部导航+侧边导航
          params: {
            row: row
          }
        })
      },
      statusClick() { //启用状态

      },
      handleSizeChange(val) { //条数
        this.pageSize = val
        this.applicationTable(this.currentPage, this.pageSize)

      },
      handleCurrentChange(val) { //页码
        this.currentPage = val
        this.applicationTable(this.currentPage, this.pageSize)
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        //this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
      },
      beforeRemove(file, fileList) {
        //return this.$confirm(`确定移除 ${ file.name }？`);
      }
    }
  }
</script>

<style>
</style>
